'use client';

import type { IQueryPostDetails } from '@/interfaces';

export default function QueryPostCustomTag({
  details,
}: {
  details: IQueryPostDetails;
}) {
  const basic = details.basic;

  return (
    <div className="row">
      <div className="col">
        <div className="card">
          <div className="card-header bg-transparent text-muted">
            <i className="bi bi-tags me-2"></i>
            自定义标签
          </div>
          <div className="card-body">
            {basic.customTags.length > 0 && (
              <ul className="list-group list-group-flush">
                {basic.customTags.map((item) => {
                  return (
                    <li key={item} className="list-group-item">
                      {item}
                    </li>
                  );
                })}
              </ul>
            )}

            {basic.customTags.length === 0 && (
              <div className="text-center text-muted">暂无自定义标签</div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
